<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
        <!-- <title>人脸录入</title> -->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
 
            html,
            body {
                width: 100%;
				height:100%;
				/* background: #FFFFFF; */
				
				/* -webkit-animation: changecolor 2s linear ; */
				/* -webkit-animation-delay: 3s; */
				animation-iteration-count:1;
				-webkit-animation-iteration-count:1; 
            }
			@keyframes changecolor{
			  0%{
				background: #BF3EFF;
			  }
			  20%{
				background:blue;
			  }
			  40%{
				background:orange;
			  }
			  60%{
				background:green;
			  }
			  80%{
				background:red;
			  }
			  100%{
				background: black;
			  }
			}
 
            .flex {
                display: flex;
            }
 
            .flex-row {
                flex-direction: row;
                justify-content: space-around;
				-webkit-justify-content: space-around;
                align-items: center;
            }
			.flex-column {
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: center;
			}
 
 
            .wrap {
                width: 100%;
				
				
            }
 
            .wrap .reference {
                position: relative;
                padding: 10px;
                background-color: rgba(255, 255, 255, 0);
				
				
				width: 300px;
				height: 300px;
				/* background: #7fee1d; */
				-moz-border-radius: 150px;
				-webkit-border-radius: 150px;
				-ms-border-radius: 150px;
				border-radius: 150px;
				border-color: #FFFFFF;
            }
 
            /* .wrap .reference img.face {
                display: block;
                width: 350px;
                height: auto;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px; 
				-ms-border-radius: 10px;//IE
                border-radius: 10px;
            } */
 
            
 
            .wrap .scan video {
                /* background-color: rgba(0, 0, 0, .8); */
                -moz-border-radius: 1px;
                -webkit-border-radius: 1px; 
                -ms-border-radius: 1px;
                border-radius: 1px;
            }
			.circle {
			    width: 300px;
			    height: 300px;
				object-fit: cover;
			    /* background: #7fee1d; */
			    -moz-border-radius: 50%;
			    -webkit-border-radius: 50%;
				-ms-border-radius: 50%;
			    border-radius: 50%;
				border: #FFFFFF;
			}
 
           
 
            .wrap .control p {
                width: 160px;
                height: 60px;
                background-color: #f9f9f9;
                text-align: center;
                line-height: 60px;
                color: #ffffff;
                font-size: 24px;
				
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px; 
				-ms-border-radius: 8px;
                border-radius: 8px;
                cursor: pointer;
                transition: .5s;
            }
 
            .wrap .scan {
                position: relative;
                overflow: hidden;
            }
 
  
 
            .wrap .scan .capture {
                width: 350px;
                height: 350px;
            }
 
            .front {
                position: absolute;
                top: 10rpx;
                width: 100%;
                height: 28%;
                /* background: url(images/rllr_bg.png) center center no-repeat; */
                background-size: 100% 100%;
                z-index: 9999;
            }
 
            .front-msg {
                position: relative;
                top: -390px;
                color: #000000;
                font-size: 24px;
				font-weight: 400;
                width: 100%;
                height: 30px;
                text-align: center;
            }
			
			.circleProgress_wrapper{
				width: 300px;
				height: 300px;
				/* margin: 150px auto; */
				position: relative;
				border:1px solid #ddd;
				background: #8C8C8C transparent;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				-ms-border-radius: 50%;
				border-radius:50%  50%  50%  50%;
				/* background:#8C8C8C; */
			}
					
 
			.wrapper{
					width: 150px;
					height: 300px;
					position: absolute;
					top:0;
					overflow: hidden;
			}
			.right{
				right:0;
			}
			.left{
				left:0;
			}
			.circleProgress{
				width: 296px;
				height: 296px;
				border:2px solid transparent;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				-ms-border-radius: 50%;
				border-radius: 50%;
				position: absolute;
				top:0;
				-webkit-transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				transform: rotate(-135deg);
			}
			.rightcircle{
				border-top:2px solid #FFFFFF;
				border-right:2px solid #FFFFFF;
				right:0;
				/* -webkit-animation: circleProgressLoad_right 2s linear 1; */
				
 
			}
			.leftcircle{
				border-bottom:2px solid #FFFFFF;
				border-left:2px solid #FFFFFF;
				left:0;
				/* -webkit-animation: circleProgressLoad_left 2s linear 1; */
				
				
				
			}
	
			@-webkit-keyframes circleProgressLoad_right{
				0%{
					-webkit-transform: rotate(-135deg);
				}
				50%,100%{
					-webkit-transform: rotate(45deg);
				}
			}
			@-webkit-keyframes circleProgressLoad_left{
				0%,50%{
					-webkit-transform: rotate(-135deg);
				}
				100%{
					-webkit-transform: rotate(45deg);
				}
			}
			
			@-ms-keyframes circleProgressLoad_right{
				0%{
					-webkit-transform: rotate(-135deg);
				}
				50%,100%{
					-webkit-transform: rotate(45deg);
				}
			}
			@-ms-keyframes circleProgressLoad_left{
				0%,50%{
					-webkit-transform: rotate(-135deg);
				}
				100%{
					-webkit-transform: rotate(45deg);
				}
			}
			@-moz-keyframes circleProgressLoad_right{
				0%{
					-webkit-transform: rotate(-135deg);
				}
				50%,100%{
					-webkit-transform: rotate(45deg);
				}
			}
			@-moz-keyframes circleProgressLoad_left{
				0%,50%{
					-webkit-transform: rotate(-135deg);
				}
				100%{
					-webkit-transform: rotate(45deg);
				}
			}
			
 
 
			
 
            video {
              /* -webkit-transform: rotateY(180deg); */
               /* Safari 和 Chrome */
              /* -moz-transform: rotateY(180deg); 
			  -ms-transform: rotateY(180deg); 
			  transform: rotateY(180deg); */
            }
			
			.head-line{
			   margin-left: 58px;
			   margin-top: 20px;
			   display:block;
			   width: 180px;
			   height: 250px;
			   border:  1px solid #FFFFFF ;
			   position: absolute;
			   -webkit-border-radius: 50%  50%  50%  50%  /   40%  40% 50%   50% ;
			   -moz-border-radius:50%  50%  50%  50%  /   40%  40% 50%   50% ;
			   -ms-border-radius: 50%  50%  50%  50%  /   40%  40% 50%   50% ;
			   border-radius:         50%  50%  50%  50%  /   40%  40% 50%   50% ;
			   
			}
        </style>
        <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script> -->
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
         <!-- <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
		<!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		
    </head>
    <body id="changecolor" style="background-color: #FFFFFF">
        <div class="title flex flex-column">
            <div style="width: 1px;height: 120px;"></div>
            <!--<textarea id="base64" class="title" style="width: 80%"></textarea>-->
        </div>
        <div class="wrap flex flex-row ">
            <!-- <div class="control flex flex-column" style="display: none;">
                <p class="open">开启摄像头</p>
                <p class="recognition">显示到Canvas</p>
                <p class="close">关闭摄像头</p>
            </div> -->
            <div class="scan reference " style="width: 300px;height: 300px;padding-left: 0px;padding-top: 0px;padding-bottom: 0px;padding-right: 0px;">
 
                <div  class="wrapper right">
					<div id="rightcircle" class="circleProgress rightcircle"></div>
                </div>
				<div class="wrapper left">
					<div id="leftcircle" class="circleProgress leftcircle"></div>
				</div>
				<div class="head-line"></div>
				<div class="div_video">
					<video id="video"  poster="" class="circle"  src="" muted="true"></video>
				</div>
                
 
            </div>
 
        </div>
        <div class="front">
            <img src="" width="100%" />
            <div class="front-msg" id="message">
            </div>
        </div>
        <div class="title flex flex-column" dislpay="none">
            <canvas style="display: none;" id="canvas" width="300" height="300" ></canvas>
        </div>
		
			
		</div>
        <script type="text/javascript">
            var buffer;
			var tracks;
            var control = document.querySelector(".control");
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var message = document.getElementById('message');
            var context = canvas.getContext('2d');
            var count = 0,
                smile = false,
                eyeStatus = false,
                yaw = 0,
                successFace = false;
			// let vconsole = new VConsole();//手机端调试时放开
 
            
			//关闭摄像头
            function closeCamera() {
                try {
                    tracks.forEach(function(track) {
                        track.stop();
                    });
                    video.srcObject = null;
					
                } catch (e) {
                    return;
                }
 
            }
			//引入uniapp
			document.addEventListener('UniAppJSBridgeReady', function() {
				console.log("引入uniapp");
			});
			//引入动画监听
			var rightCircle = document.getElementById("rightcircle");
			var leftCircle = document.getElementById("leftcircle");
			var changeColor = document.getElementById("changecolor");
			
			// 使用 JavaScript 开始动画
			function startAnimation() {
			    rightCircle.style.WebkitAnimation = "circleProgressLoad_right 2s linear 1"; // Chrome, Safari 和 Opera 代码
				rightCircle.style.animation = "circleProgressLoad_right 2s linear 1"; // Chrome, Safari 和 Opera 代码
			    
				leftCircle.style.WebkitAnimation = "circleProgressLoad_left 2s linear 1";
				leftCircle.style.animation = "circleProgressLoad_left 2s linear 1";
				
				changeColor.style.WebkitAnimation = "changecolor 2s linear"
				changeColor.style.animation = "changecolor 2s linear"
			}
 
            (function() {
                window.addEventListener("DOMContentLoaded", function() {
                    // Grab elements, create settings, etc.
                    var mediaConfig = {
                        video: true
                    };
                    var errBack = function(e) {
                        console.log('An error has occurred!', e)
                    };
					console.log("相机绑定的那个事件开始了");
 
					
                    // Put video listeners into place
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                        //console.log("navigator.mediaDevices");
						console.log("调用相机1");
                        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                            // video.src = window.URL.createObjectURL(stream);
							console.log("getUserMedia------");
                            video.srcObject = stream;
                            video.play();
                            buffer = stream;
							
							tracks = stream.getTracks();
                        }).catch(function(err) {
							console.log("getUserMedia报错了！")
							console.log(err.name + ": " + err.message);
						});
                    }
                    /* Legacy code below! */
                    else if (navigator.getUserMedia) { // Standard
						console.log("调用相机2");
                        navigator.getUserMedia(mediaConfig, function(stream) {
                            video.src = stream;
                            video.play();
                            buffer = stream;
                        }, errBack);
                    } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
						console.log("调用相机3");
                        navigator.mozGetUserMedia(mediaConfig, function(stream) {
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                            buffer = stream;
                        }, errBack);
                    } else if (navigator.msGetUserMedia) { // Mozilla-prefixed
						console.log("调用相机4");
                        navigator.msGetUserMedia(mediaConfig, function(stream) {
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                            buffer = stream;
                        }, errBack);
                    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
						console.log("调用相机5");
                        navigator.webkitGetUserMedia(mediaConfig, function(stream) {
                            video.src = window.webkitURL.createObjectURL(stream);
                            video.play();
                            buffer = stream;
                        }, errBack);
                    }
                }, false);
				
				
                //人脸识别接口调用百度AI，调用后通过不同的结果展示不同的信息
                    
            })();
 
            function goBackPage() {
                if (successFace && smile) {
                    closeCamera();
       
					console.log("准备返回识别结果了~~~");
					console.log("马上返回===");
					uni.navigateTo({
						url:'/pages/html/faceResult'
					})
					
                }else{
					closeCamera();
					uni.navigateTo({
						url:'/pages/html/faceResult'
					})
				}
            }
 
            function getImage() {
				// console.log("获取画布图片开始");
                context.drawImage(video, 0, 0, 350, 350);
                // 把画布的内容转换为base64编码格式的图片
                var data = canvas.toDataURL('image/png', 1); //1表示质量(无损压缩)
				
				var base64 = data.replace('data:image/png;base64,', '');
				// console.log("画布图片："+base64);
                return base64;
            }
        </script>
    </body>
</html>
